

<template>
  <div class="content" >
    <el-card style="width: 80%;min-height: 70%;border-radius: 20px; overflow: scroll;overflow-x: hidden;" ref="content" @scroll="handleScroll">
      <h2 style="text-align: center;">免责声明</h2>
      <p>
        <br>
        <b>一、概述</b>
        <br>
        本免责声明适用于使用本一键分发系统（以下简称“本系统”）的所有用户。用户在使用本系统前，请务必仔细阅读并理解本免责声明的全部内容。用户一旦开始使用本系统，即表示用户已接受并同意本免责声明的全部条款。
        <br>
        <b>二、服务内容</b>
        <br>
        本系统提供内容一键分发至多个平台的功能，包括但不限于社交媒体、内容发布平台等。用户应自行负责所发布内容的合法性、真实性和准确性。
        <br>
        <b>三、免责条款</b>
        <br>
        本系统仅提供内容分发服务，对于用户发布的内容，本系统不承担任何审查、监督或修改的责任。用户应自行确保其发布的内容不侵犯任何第三方的合法权益，包括但不限于知识产权、隐私权等。
        用户在使用本系统过程中，如因系统原因造成的数据丢失、服务中断或其他损失，本系统将尽力提供必要的技术支持和协助，但不对因此产生的任何直接或间接损失承担责任。
        用户应自行承担因使用本系统而可能产生的所有风险，包括但不限于内容被删除、账号被封禁、法律纠纷等。本系统对于因用户行为导致的任何后果不承担任何责任。
        本系统不保证服务的稳定性和可靠性，不承诺任何形式的服务质量和可用性保证。对于因系统升级、维护或其他不可抗力因素导致的服务中断或延迟，本系统不承担任何责任。
        用户在使用本系统过程中，应遵守国家法律法规和公序良俗，不得利用本系统从事任何违法、违规或不良行为。如因用户行为导致的任何法律责任，由用户自行承担。
        <br>
        <b>四、其他</b>
        <br>
        本免责声明自用户开始使用本系统之日起生效，并持续有效至用户停止使用本系统之日止。
        本免责声明的最终解释权归本系统所有。如本免责声明的任何条款与法律法规相抵触，以法律法规为准。
        本系统有权随时修改本免责声明的条款内容，修改后的免责声明将自发布之日起生效。请用户在使用本系统前，务必查看并了解最新的免责声明内容。
        请您在使用本系统前仔细阅读并理解以上免责声明，如有任何疑问或异议，请在使用前咨询本系统的客服人员。感谢您的理解和支持！</p>
    </el-card>
    <div class="access">
      <el-checkbox value="true" name="type" v-model="checked">
        我已阅读并同意
      </el-checkbox>
      <el-button type="primary" @click="setNewUser" :disabled="checked==false || canClick==false">{{ agreeText }}</el-button>
    </div>
  </div>


</template>


<script setup>
import { onMounted, ref ,onUnmounted} from 'vue'
import { useStore} from 'vuex'
import {useRouter} from 'vue-router'


// api
import {setUserInfo} from '~/api/user/index'


const store = useStore()
const router = useRouter()

const content = ref(null);

const isAtBottom = ref(false);

const checked = ref(false)
// 检查滚动位置
const checkScrollPosition = () => {
  if (content.value) {
    const scrollHeight = content.value.scrollHeight;
    const scrollTop = content.value.scrollTop;
    const clientHeight = content.value.clientHeight;
    isAtBottom.value = scrollTop + clientHeight >= scrollHeight - 10; // 减去 10 是为了添加一些缓冲
  } else {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    const clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    isAtBottom.value = scrollTop + clientHeight >= scrollHeight - 10;
  }
};

const canClick = ref(false) // 新增：用于判断是否正在倒计时
const isCountingDown = ref(false) // 新增：用于判断是否正在倒计时
const agreeText = ref('同意') // 新增：用于判断是否正在倒计时
// 新增：倒计时相关逻辑
const countdownTime = 9 // 倒计时时间，单位：秒
const countdownInterval = 1000 // 倒计时间隔，单位：毫秒

let countdownTimer // 倒计时定时器

const startCountdown = () => {
  if (isCountingDown.value) return // 如果已经在倒计时，不进行任何操作

  isCountingDown.value = true // 设置为正在倒计时

  let timeLeft = countdownTime

  countdownTimer = setInterval(() => {
    if (timeLeft > 0) {
      timeLeft--
      agreeText.value = `同意（${timeLeft}s）`
    } else {
      clearInterval(countdownTimer)
      isCountingDown.value = false // 倒计时结束，设置为可以再次点击
      // 倒计时结束，按钮文本恢复为原始状态
      // 这里假设原始文本为 "同意"
      // 如果实际不同，请修改下面这行代码
      agreeText.value = '同意'
      canClick.value = true
    }
  }, countdownInterval)

}
// 监听滚动事件
const handleScroll = () => {
  checkScrollPosition();
};

// 组件挂载后添加滚动事件监听器
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  startCountdown()
});

// 组件卸载前移除滚动事件监听器
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});


const setNewUser = async () =>{
   await setUserInfo({id:store.state.user.id,is_newuser:1}).then((res) => {
        store.dispatch("getUserInfo").then(() => goTo('/'))
    })

}
const goTo = (path) => {
  router.push({path:path})
}
</script>


<style scoped>
.content{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.el-checkbox{
  margin-right: 50px;
  margin-top: 10px;
}
::-webkit-scrollbar {
  display: none;
}
</style>